<!-- components/charts/TrendChart.vue -->
<template>
	<view class="chart-container">
		<view v-if="loading" class="loading">📊 加载中...</view>
		<view v-else-if="!data || !data.series || data.series.length === 0" class="loading">⚠️ 暂无数据</view>
		<qiun-data-charts v-else :canvasId="canvasId" :type="type" :chartData="data" background="none" :padding="padding" :extra="extra" :opts="opts" :onInit="true" />
	</view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
	data: Object,
	loading: Boolean,
	type: { type: String, default: 'line' }
});

const canvasId = computed(() => {
	return `${props.type}-chart-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
});

// ✅ 关键修改：增大底部内边距（index 2）
const padding = [15, 10, 40, 35]; // [上, 右, 下, 左] rpx

const extra = {
	line: {
		linearCategoryGradient: true,
		type: 'curve',
		width: 2
	}
};

const opts = {
	xAxis: {
		disabled: false,
		axisLine: true,
		axisLineColor: '#ccc',
		fontColor: '#666'
	},
	yAxis: {
		disabled: false,
		splitNumber: 5,
	},
	legend: {
		show: true,
		position: 'top'
	},
	dataLabel: false,
	enableScroll: false
};
</script>

<style scoped>
.chart-container {
	width: 100%;
	height: 460rpx;
	margin: 16rpx 0 32rpx 0;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	padding-bottom: 30rpx;
	overflow: hidden;
}

.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	font-size: 32rpx;
	color: #999;
}
</style>
